import { Form } from 'antd';
import React from 'react';
import { CBorder } from '../../designer/sider-bar/settings/form-items/CBorder';
import { CColorPicker } from '../../designer/sider-bar/settings/form-items/CColorPicker';
import { CInputNumber } from '../../designer/sider-bar/settings/form-items/CInputNumber';
import { CMargin } from '../../designer/sider-bar/settings/form-items/CMargin';
import { CTextArea } from '../../designer/sider-bar/settings/form-items/CTextArea';
import { CTextInput } from '../../designer/sider-bar/settings/form-items/CTextInput';
import { CSwitch } from '../../designer/sider-bar/settings/form-items/CSwitch';

/**
 * @class CChartSettings
 *
 * CChart 对应的属性配置面板。
 *
 * @author 3051813192@qq.com
 */
export const CChartSettings = props => {
  return (
    <Form layout="vertical">
      <Form.Item label="标题">
        <CTextInput {...props} propKey="text"></CTextInput>
      </Form.Item>
      <Form.Item label="子标题">
        <CTextInput {...props} propKey="subtext"></CTextInput>
      </Form.Item>
      <Form.Item label="是否展示提示框">
        <CSwitch {...props} propKey="showTooltip"></CSwitch>
      </Form.Item>
      <Form.Item label="是否展示图例">
        <CSwitch {...props} propKey="showLegend"></CSwitch>
      </Form.Item>
      <Form.Item label="高度">
        <CInputNumber {...props} propKey="height" min={0} max={100000}></CInputNumber>
      </Form.Item>
      <Form.Item label="最小高">
        <CInputNumber {...props} propKey="minHeight" min={1} max={100000}></CInputNumber>
      </Form.Item>
      <Form.Item label="宽度">
        <CInputNumber {...props} propKey="width" min={-1} max={100000}></CInputNumber>
      </Form.Item>
      <Form.Item label="边框">
        <CBorder {...props} propKey="border"></CBorder>
      </Form.Item>
      <Form.Item label="背景色">
        <CColorPicker {...props} propKey="bgColor"></CColorPicker>
      </Form.Item>
      <Form.Item label="外边框">
        <CMargin {...props} propKey="margin"></CMargin>
      </Form.Item>
      <Form.Item label="内边框">
        <CMargin {...props} propKey="padding"></CMargin>
      </Form.Item>
      <Form.Item label="文档数据">
        {/*  https://echarts.apache.org/ */}
        <CTextArea {...props} propKey="chartOptions"></CTextArea>
      </Form.Item>
    </Form>
  );
};
